<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div>
      <ul>
        <li>苹果</li>
        <li>樱桃</li>
        <li>水蜜桃</li>
        <li>榴莲</li>
      </ul>
    </div>
    <script>
      // 立即执行函数中的函数与立即执行函数中的函数可以构成一个闭包。正是由于立即执行函数的这个闭包特性，可以解决点击事件和定时器中的索引值问题。

      // 闭包应用1：点击li标签后输出对应的索引号

      // 面试问题：如何通过闭包实现点击li打印对应的索引号
      // 实现原理：立即执行函数+点击事件（点击事件中想要获取的变量可以通过立即执行函数来获取）

      var lis = document.querySelectorAll("li");
      // 简单方法：
      // lis.forEach((value, index) => {
      //     value.onclick = function() {
      //         console.log(index);
      //     }
      // })

      // 注意：只是为了演示闭包的作用：

      // 通过闭包的形式打印li的索引
      // for (var i = 0; i < lis.length; i++) {
      //     // 立即执行函数也称为小闭包，因为立即执行函数中任何一个函数都可以使用其中的成员变量
      //         立即执行函数中的函数与立即执行函数中的函数可以构成一个闭包
      //     (function(i) {
      //         lis[i].onclick = function() {
      //             // 此时访问的i变量是闭包函数的变量，不再是for上的变量
      //             console.log(i);
      //         }
      //     })(i)
      // }

      // 由于存在闭包关系，index变量的内存不会被立即释放，但这样的变量多了可能导致内存泄漏。
    </script>
  </body>
</html>
